<template>
  <view class="end">
    <view class="endingBox">
      <view class="chargingManager-end">
        <view class="ending">充电已结束</view>
        <view class="ending-content">
          <view class="ending-text">
            <view>充电时长</view>
            <view class="ending-number">{{handelFormattingTime(chargeData.duration)}}</view>
          </view>
          <view class="ending-text">
            <view>充电电量(度)</view>
            <view class="ending-number">{{chargeData.energy}}</view>
          </view>
          <view class="ending-text">
            <view>费用(￥)</view>
            <view class="ending-number">{{chargeData.amount}}</view>
          </view>
        </view>
      </view>
      <view class="end-content">
        <view class="contentBox">
          <img src="../static/chargingManager/order.png" alt="" class="orderImg">
          <view>订单信息</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">充电桩编号：</view>
          <view class="end-listText">{{chargeData.connectorId}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">站点名字：</view>
          <view class="end-listText">{{chargeData.stationName}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">电费：</view>
          <view class="end-listText">{{chargeData.electricitFee}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">服务费：</view>
          <view class="end-listText">{{chargeData.serviceFee}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">额度抵扣：</view>
          <view class="end-listText-red">{{chargeData.deductionAmount || ''}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">开始时间：</view>
          <view class="end-listText">{{handleTimestampToStr(chargeData.startTime)}}</view>
        </view>
        <view class="end-list">
          <view class="end-listTitle">结束时间：</view>
          <view class="end-listText">{{handleTimestampToStr(chargeData.endTime)}}</view>
        </view>
      </view>
      <view class="tips-text"> 账户余额两小时后自动退款，请您耐心等待</view>
      <view class="complete" @click="complete">完成</view>
    </view>
  </view>
</template>

<script>
import {chargeRecordDetailSepApi} from "../api/chargingManager/index"
import { formattingTime3, timestampToStr } from "../common/comFn"
export default {
  data(){
    return{
      startChargeSeq: '',
      chargeData:{}
    }
  },
  onLoad(options){
    this.startChargeSeq = options.startChargeSeq
    this.getOrderDetails()
  },
  methods:{
    // 完成按钮
    complete(){
      uni.redirectTo({
        url:'/pages/charging/chargingManager/chargeComplete'
      })
    },
    /**获取订单详情*/
    getOrderDetails(){
      chargeRecordDetailSepApi({startChargeSeq: this.startChargeSeq}).then(res=>{
        this.chargeData = res.data
      })
    },
    /**处理秒转换*/
    handelFormattingTime(count){
      return formattingTime3(count)
    },
    /**处理时间换算*/
    handleTimestampToStr(time){
      return timestampToStr(time)
    },
  }
}
</script>

<style scoped>
.end{
  width: 100vw;
  min-height: 100vh;
  background: #557EFF;
  box-sizing: border-box;
  padding-top: 20px;
}
.endingBox{
  width: 100vw;
  min-height: 97vh;
  background: #fff;
  padding: 30px 15px 15px 15px;
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
}
.chargingManager-end{
  width: 100%;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 22px 16px;
}
.ending{
  font-weight: 600;
  font-size: 18px;
  text-align: center;
}
.ending-content{
  width: 100%;
  margin-top: 15px;
  box-sizing: border-box;
  background: #FBFBFB;
  display: flex;
  justify-content: space-between;
  padding: 30px 15px;
  font-size: 12px;
  color: #767676;
}
.ending-text{
  text-align: center;
}
.ending-number{
  font-weight:bold;
  font-size: 18px;
  margin-top: 6px;
  color: #1A1A1A;
}
.end-content{
  width: 100%;
  height: auto;
  background: #fff;
  box-sizing: border-box;
  padding: 0 16px;
  margin-top: 32px;
  font-size: 14px;
}
.contentBox{
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #1A1A1A;
  padding-bottom: 19px;
  border-bottom: solid 1px  #F6F6F7;
}
.orderImg{
  width: 17px;
  height: 18px;
  margin-right: 10px;
}
.end-list{
  padding: 14px 0;
  display: flex;
  justify-content: space-between;
  border-bottom: solid 1px  #F6F6F7;
}
.end-listTitle{
  color: #767676;
}
.end-listText{
  color: #1A1A1A;
}
.end-listText-red {
  color: red;
}
.complete{
  width: 100%;
  height: 40px;
  margin: 13px auto;
  text-align: center;
  color: #fff;
  line-height: 40px;
  box-sizing: border-box;
  height: 48px;
  background: #557EFF;
  border-radius: 87px 87px 87px 87px;
}
.tips-text {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
  color: #FC8800;
  line-height: 18px;
}
</style>